{% extends "Blog/base.html" %}

{% block main %}
<main class="col-md-8">
    {% for article in article_list %}
    <article class="post post-{{ article.pk }}">
        <header class="entry-header">
            <h1 class="entry-title">
                <!--
                这里通过在models中定义一个方法来获取文章的url,还一种直接使用url模板标签来获取符合规则的url
                 {% url 'detail' article.pk %}
                -->
                <a href="{{ article.get_absolute_url }}">{{ article.title }}</a>
            </h1>
            <div class="entry-meta">
                <span class="post-category"><a href="#">{{ article.category.name }}</a></span>
                <span class="post-date"><a href="#"><time class="entry-date"
                                                          datetime="{{ article.creat_time }}">{{ article.creat_time }}</time></a></span>
                <span class="post-author"><a href="#">{{ article.author }}</a></span>
                <span class="comments-link"><a href="{% url 'detail' article.pk %}">{{ article.comment_set.count }} 评论</a></span>
                <span class="views-count"><a href="#">{{ article.views }} 阅读</a></span>
            </div>
        </header>
        <div class="entry-content clearfix">
            <p>{{ article.excerpt }}</p>
            <div class="read-more cl-effect-14">
                <a href="{{ article.get_absolute_url }}" class="more-link">继续阅读 <span class="meta-nav">→</span></a>
            </div>
        </div>
    </article>
    {% empty%}
    <p>暂时没有新发布的文章!</p>
    {% endfor %}






    <!-- 简单分页效果 -->
    <div class="pagination-simple">
        {% if page_obj.has_previous %}
        <a href="?page={{ page_obj.previous_page_number }}">上一页</a>
        {% endif %}
        <span class="current">
            第 {{ page_obj.number }} 页 / 共 {{ page_obj.paginator.num_pages }} 页
        </span>
        {% if page_obj.has_next %}
        <a href="?page={{ page_obj.next_page_number }}">下一页</a>
        {% endif %}
    </div>
    <!--
    <div class="pagination">
        <ul>
            <li><a href="">1</a></li>
            <li><a href="">...</a></li>
            <li><a href="">4</a></li>
            <li><a href="">5</a></li>
            <li class="current"><a href="">6</a></li>
            <li><a href="">7</a></li>
            <li><a href="">8</a></li>
            <li><a href="">...</a></li>
            <li><a href="">11</a></li>
        </ul>
    </div>
    -->
</main>
{% endblock main %}